import "./index.scss"
import { Button,Table,Popconfirm ,Modal,Tag,Form,Input,Select,message,Cascader} from 'antd';
import React, { Component } from 'react';
import chelist from "../../mobx/chelist"
import { sexList , peijian ,Rumoney} from "../../utils";
import {observer} from "mobx-react"
import {FileAddOutlined,TagOutlined,DeleteOutlined,ExclamationCircleOutlined,DesktopOutlined,CarOutlined,LockOutlined} from "@ant-design/icons"
import { ajax } from "../../api";
import { chepaiReg } from "../../utils/validate"
import moment from "moment"

const {Search} = Input

const layout = {
    labelCol: { offset:1,span: 12 },
    wrapperCol: { offset:1 , span: 12 },
};
const { Option } = Select;
@observer
class Tian extends Component {

    state={
        columns:[
            {title:"车辆类型",
            dataIndex:"leixing",
            align:'center',
            key:"leixing"
            },
            {title:"车牌号",
            dataIndex:"chepai",
            align:'center',
            key:"chepai"
            },
            {title:"车辆问题",
            dataIndex:"wenti",
            align:'center',
            key:"wenti"
            },
            {title:"进店时间",
            dataIndex:"time",
            align:'center',
            render:(text)=>{
                return moment(text.time).format("YYYY-MM-DD HH:mm:ss")
            }
            },
            {title:"维修方式",   // 选择钣金油漆机修
            dataIndex:"fangshi",
            align:'center',
            render:(text,item,index)=>{
                return <Tag color={sexList[item.fangshi].color}> { sexList[item.fangshi].name }</Tag>
            }
            },
            {title:"使用配件",  
            dataIndex:"fangshi",
            align:'center',
            render:(text,item,index)=>{
                
                return (
                    <div>
                        {
                            item.peijian.map((item,i)=>{
                              return  (<Tag key={i}> { item }</Tag>)
                            })
                        }
                    </div>
                )
            }
            },
            {title:"维修价格",
            dataIndex:"money",
            align:'center',
            key:"money"
            },
            {
            title:"操作",
            align:'center',
            dataIndex:"coazuo",
            render:(text,item,index)=>{
                return(
                    <div>
                        <Popconfirm
                          title="是否确定删除?"
                          onConfirm={()=>this.delconfirm(item,index)}
                          onCancel={this.delcancel}
                          okText="确定"
                          cancelText="取消"
                          style={{marginRight:10}}
                        >
                            <Button style={{marginRight:10}} type="danger" shape="circle" icon={<DeleteOutlined/>}></Button>
                        </Popconfirm>,                 
                      <Button onClick={()=>this.showUpdateModal(item)} style={{marginRight:10}} type="primary" shape="circle" icon={<FileAddOutlined />}></Button>
                    

                    <Popconfirm
                          title="是否确定接单?"
                          onConfirm={()=>this.jiedan(item,index)}
                          onCancel={this.delcancel}
                          okText="确定"
                          cancelText="取消" 
                          style={{marginRight:10}}
                        >
                      <Button type="danger" shape="circle" icon={<TagOutlined />}></Button>
                    </Popconfirm>
                    </div>
                ) 
            }
        }
        ],
        addvisible:false,
        updatevisible:false
    }

    onSearch=(value)=>{
        var keyword=this.SearchInp.state.value
        console.log(keyword);
        ajax.CheList({
            keyword
        }).then(res=>{
            if(res.code==200){
                chelist.changeAlllist(res.list)
                console.log(res);
            }
        })
    }

    jiedan=(item,index)=>{
      
        ajax.getchelist({
            _id:item._id,
        }).then(res=>{
            if(res.code==200){
                var list = item
                console.log(list);
                this.props.history.push("/main/anno/gong/?aid="+item._id);
            }
        })
    }


    delconfirm=(item,index)=>{
        console.log(item);
        ajax.delcheliang({
            _id:item._id,
        }).then(res=>{
            if(res.code==200){
                var list =  chelist.allList.filter(val=>val._id!==item._id)
                chelist.changeAlllist(list)               
            }
        })
    }

    delcancel=()=>{
    }

    componentDidMount(){
        chelist.getAllList()
    }

    addSubmit=()=>{
        this.addfrom.validateFields()
        .then(value=>{
            console.log(value);
            ajax.addche(value)
            .then(res=>{
                if(res.code==200){
                    this.setState({
                        addvisible:false
                    })
                    chelist.getAllList()
                    this.addfrom.resetFields()
                }
            })
        })
        .catch(err=>{
            message.error("请完善数据之后在提交")
        })
    }
    //新增车辆
    addCancel=()=>{
        this.setState({
            addvisible:false
        })
        this.addfrom.resetFields()
    }

    showAddModal=()=>{
        this.setState({
            addvisible:true
        })
    }

    //更改信息
    updateSubmit=(value)=>{
        console.log(value);
        this.updatefrom.validateFields()
        .then(value=>{
            console.log(value);
            ajax.updatcheliang({
                ...value,
                _id:this.state.detail._id
            })
            .then(res=>{
                if(res.code==200){
                    this.setState({
                        updatevisible:false
                    })
                    var list = chelist.allList.map(item=>{
                        if(item._id == this.state.detail._id){
                            item = {...item,...value}
                        }
                        return item
                    })
                    chelist.changeAlllist(list)
                    this.updatefrom.resetFields()
                }
            })
        }).catch(err=>{
            message.error("请先完善信息在操作")
        })
    }

    updateCancel=()=>{
        this.setState({
            updatevisible:false
        })
    }

    showUpdateModal=(item)=>{
        this.setState({
            updatevisible:true,
            detail:item
        },()=>{
            this.updatefrom.setFieldsValue(item)
        })
       
    }

    onChange=(value)=>{
        value.forEach((item,i)=>{
            Rumoney.forEach((value,index)=>{
                if(item==value.value){
                    this.addfrom.setFieldsValue({
                        money:value.money*1.5,
                    })
                }
            })
        })
    }

    onupdateChange=(value)=>{
        value.forEach((item,i)=>{
            Rumoney.forEach((value,index)=>{
                if(item==value.value){
                    this.updatefrom.setFieldsValue({
                        money:value.money*1.5,
                    })
                }
            })
        })
    }
    render() {
        return (
            <div>
              <h2 style={{textAlign:"center",color:"#f00",fontSize:30,fontWeight:600}}>车辆管理</h2>
 
                <div className="sousou">
                <Button type="danger" onClick={this.showAddModal}>添加车辆</Button>
                <Search placeholder="搜索维修车辆" enterButton="搜索" style={{width:350}} ref={el=>this.SearchInp=el}   onSearch={this.onSearch}/>
                
                </div>
                <Table
                style= {{marginTop:20,textAlign:"center"}}
                dataSource={chelist.allList}
                columns={this.state.columns}
                pagination={{pageSize:5}}
                bordered
                rowKey={
                    (item)=>(item._id)
                }
                >
                </Table>

                <Modal
                    title="新增车辆"
                    visible={this.state.addvisible}
                    onOk={this.addSubmit}
                    onCancel={this.addCancel}
                    okText="确定新增"
                    cancelText="取消"
                    className="my-modal"

                    >
                        <Form
                        name="addfrom"
                        ref={el=>this.addfrom=el}
                        layout="vertical"
                        className="form-box"
                        {...layout}
                        >
                            
                            <Form.Item
                            label="车辆类型"
                            name="leixing"
                            rules={[{ required: true, message: '请输入车辆类型!' }]}
                        >
                            <Input  prefix={<CarOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        <Form.Item
                            label="车牌号"
                            name="chepai"
                            rules={[{ required: true, message: '请输入车牌号!' }
                            ,{pattern:chepaiReg,message:"请输入正确的车牌号"}]}
                            
                        >
                            <Input placeholder={"例:鄂A12345"} prefix={<DesktopOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        
                        <Form.Item
                            label="车辆问题"
                            name="wenti"
                            rules={[{ required: true, message: '请输入车辆问题!' }]}
                        >
                            <Input  prefix={<ExclamationCircleOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        <Form.Item
                            label="维修方式"
                            name="fangshi"
                            rules={[{ required: true, message: '请选择维修方式!' }]}                               
                        >

                            <Select>
                                {
                                    sexList.map((l,i)=>{
                                        return (
                                            <Option key={i} value={l.id}>
                                                {l.name}
                                            </Option>
                                        )
                                    })
                                }
                           </Select>

                        </Form.Item>

                        <Form.Item
                            label="配件栏"
                            name="peijian"
                            rules={[{ required: true, message: '请选择配件' },
                           ]}
                        >
                            <Cascader  placeholder="请选择添加的配件" options={peijian} onChange={this.onChange} ></Cascader> 
                        </Form.Item>
                        <Form.Item
                            label="维修价格"
                            name="money"
                        >
                            <Input type="text" disabled style={{width:"100%"}} ref={el=>this.dmoney=el} prefix={<LockOutlined  className="login-icon-color"  />} />
                        </Form.Item>
                        </Form>
                </Modal>
                

                {/* 修改信息 */}
                <Modal
                    title="修改车辆"
                    visible={this.state.updatevisible}
                    onOk={this.updateSubmit}
                    onCancel={this.updateCancel}
                    okText="确定修改"
                    cancelText="取消"
                    className="my-modal"

                    >
                        <Form
                        name="updatefrom"
                        ref={el=>this.updatefrom=el}
                        layout="vertical"
                        className="form-box"
                        {...layout}
                        >
                            
                            <Form.Item
                            label="车辆类型"
                            name="leixing"
                            rules={[{ required: true, message: '请输入车辆类型!' }]}
                        >
                            <Input  prefix={<CarOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        <Form.Item
                            label="车牌号"
                            name="chepai"
                            rules={[{ required: true, message: '请输入车牌号!' }
                            ,{pattern:chepaiReg,message:"请输入正确的车牌号"}]}
                            
                        >
                            <Input placeholder={"例:鄂A12345"} prefix={<DesktopOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        
                        <Form.Item
                            label="车辆问题"
                            name="wenti"
                            rules={[{ required: true, message: '请输入车辆问题!' }]}
                        >
                            <Input  prefix={<ExclamationCircleOutlined   className="login-icon-color" /> }  />
                        </Form.Item>

                        <Form.Item
                            label="维修方式"
                            name="fangshi"
                            rules={[{ required: true, message: '请选择维修方式!' }]}                               
                        >

                            <Select>
                                {
                                    sexList.map((l,i)=>{
                                        return (
                                            <Option key={i} value={l.id}>
                                                {l.name}
                                            </Option>
                                        )
                                    })
                                }
                           </Select>

                           <Form.Item
                            label="配件栏"
                            name="peijian"
                            rules={[{ required: true, message: '请选择配件' },
                           ]}
                            >
                                <Cascader  placeholder="请选择添加的配件" options={peijian} onChange={this.onupdateChange} ></Cascader> 
                            </Form.Item>
                            <Form.Item
                                label="维修价格"
                                name="money"
                            >
                                <Input type="text" disabled style={{width:"100%"}} ref={el=>this.dmoney=el} prefix={<LockOutlined  className="login-icon-color"  />} />
                            </Form.Item>
                        </Form.Item>

                        </Form>
                </Modal>

                                
            </div>
        );
    }
}

export default Tian;